<template>
	<view class="chart-container padding">
		<!-- 柱状图卡片 -->
		<view class="chart-card">
			<view class="chart-title">近7日故障、报警统计（柱状图）</view>
			<Column class="chart" :chartData="chartData"/>
		</view>
		<!-- 折线图卡片 -->
		<view class="chart-card">
			<!-- 折线图标题 -->
			<view class="chart-title">近7日故障、报警统计（折线图）</view>
			<Line class="chart" :chartData="chartData"/>
		</view>
	</view>
</template>

<script>
	import request from "@/util/request";
	import Column from "./column.vue";
	import Line from "./line.vue";
	export default {
		components: {
		  Column,Line
		},
		mounted() {
			this.getServerData()
		},
		data() {
			return {
				chartData:{}
			}
		},
		methods: {
			getServerData() {
				const today = new Date();
				const day = new Date(today);
				let userId = this.$store.state.userInfo.id;
				let level = this.$store.state.userInfo.level;
				let organizationId = this.$store.state.userInfo.organization;
				let isAllClient = this.$store.state.userInfo.isAllClient;
				let clientIds;
				if (isAllClient === "1") {
					clientIds = this.$store.state.userInfo.clientIds;
				} else {
					clientIds = [];
				}
				let firstDayStr=this.getDateDaysAgo(6)+" 00:00:00";
				let lastDayStr=this.getDateDaysAgo(0) +" 23:59:59";
				request.get("/warn-record/findMouthData?organizationId=" + organizationId + "&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds + "&startTime=" + firstDayStr + "&endTime=" + lastDayStr).then(res => {
					const result = this.generateSeriesData(res.data)
					this.chartData = JSON.parse(JSON.stringify(result));
				})
			},
			generateSeriesData(data) {
			     // 初始化结果对象
			        let res = {
			            categories: [],
			            series: [
			                { name: "报警", data: [] },
			                { name: "故障", data: [] }
			            ]
			        };

			        // 遍历数据，直接使用每个项的日期和对应的报警、故障数量
			        data.forEach(item => {
			            res.categories.push(item.dt);               // 日期
			            res.series[0].data.push(item.fireCount);    // 报警数据
			            res.series[1].data.push(item.breakCount);   // 故障数据
			        });

			        return res;
			},
			getDateDaysAgo(dayAgo) {
			    const today = new Date();
			    const sevenDaysAgo = new Date(today);
			    sevenDaysAgo.setDate(today.getDate() - dayAgo);

			    const year = sevenDaysAgo.getFullYear();
			    const month = String(sevenDaysAgo.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，因此要加 1
			    const day = String(sevenDaysAgo.getDate()).padStart(2, '0');

			    return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style scoped>
.chart-container {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 增加了间距，确保标题和图表之间有足够的空隙 */
}

.chart-card {
  background-color: #fff; /* 卡片背景 */
  border-radius: 8px; /* 卡片圆角 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
}

.chart-title {
  margin-top: 10px;
  font-size: 18px; /* 标题字体大小 */
  font-weight: bold; /* 标题加粗 */
  color: #333; /* 标题颜色 */
  text-align: center; /* 标题居中 */
  margin-bottom: 15px; /* 标题与图表之间的距离 */
}

.chart {
  border-radius: 8px; /* 图表圆角 */
  padding: 10px 0; /* 图表内边距 */
}
</style>
